<template>
  <div>
    <van-nav-bar
        title="支付页面"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
    />
    <h2 style="text-align: center;">欢迎使用微信支付</h2>
    <div style="text-align: center;">订单号为：{{trade}}</div>
    <canvas id="canvas" style="align-content: center;"></canvas>
    <div style="text-align: center;">请使用微信扫描二维码支付</div>
    <br>
  </div>
</template>

<script>
import Vue from "vue"
// 引入QRcode插件
import QRCode from "qrcode"

Vue.use(QRCode)
export default {
  data() {
    return {
      trade: null,
      cleaningWorkorder:{}
    }
  },
  methods: {
    onClickLeft() {
      this.$router.push('/workorderbjddcl')
    },
    useqrcode(url) {
      var canvas = document.getElementById("canvas");
      QRCode.toCanvas(canvas, url, function (error) {
        if (error) {
        } else {
          console.log("success!");
        }
      });
    }
  },

  mounted() {
    this.cleaningWorkorder = this.$route.query
    let randomNumber = Math.floor(Math.random() * 1000000);
    this.trade = `ORDER${randomNumber}`
    this.cleaningWorkorder.code = this.trade
    this.cleaningWorkorder.id=this.$route.query.id
    this.axios.get(`http://localhost:9999/api-cleaning-service/wxpay/getQrCodeUrl/${this.cleaningWorkorder.code}`).then((res) => {
      this.useqrcode(res.data);
      // console.log(this.useqrcode)
    })
    //当检测到订单状态为success的时候，跳转到支付成功页面
    setTimeout(() => {
      this.axios.post(`http://localhost:9999/api-cleaning-service/wxpay/orderquery`, this.cleaningWorkorder).then((ress) => {
        if (ress.data == 'fail') {
          console.log("请求超时")

        }
        if (ress.data == 'fail') {
          console.log('请求失败')
        }
        if (ress.data == 'success') {
          console.log('请求成功')
          this.$router.push("/chenggong")
        }
      })
    }, 3000);
  }
}


</script>

<style scoped>

</style>
